<template>
  <MainPage>
    <template #header>
      <CommonHeader title="个人中心" background="#ffffff">
        <template #extra>
          <a-button type="primary" @click="router.back()">返回</a-button>
        </template>
      </CommonHeader>
    </template>

    <div class="user-center-content">
      <!-- 用户信息展示 -->
      <UserInfoDisplay @edit-avatar="handleEditAvatar" />

      <!-- 功能区域 -->
      <div class="function-area">
        <!-- 个人信息编辑 -->
        <div class="function-card" v-if="!showEditProfile && !showChangePassword">
          <div class="card-header">
            <h3>个人信息</h3>
            <a-button type="primary" @click="showEditProfile = true">
              <EditOutlined />
              编辑资料
            </a-button>
          </div>
          <div class="card-content">
            <p>管理您的基本信息，包括昵称、性别、职位等</p>
          </div>
        </div>

        <!-- 编辑个人信息表单 -->
        <EditProfileForm
          v-if="showEditProfile"
          :visible="showEditProfile"
          @submit="handleProfileSubmit"
          @cancel="showEditProfile = false"
        />

        <!-- 修改密码表单 -->
        <ChangePasswordForm
          v-if="showChangePassword"
          :visible="showChangePassword"
          @submit="handlePasswordSubmit"
          @cancel="showChangePassword = false"
        />

        <!-- 用户操作 -->
        <UserActions
          v-if="!showEditProfile && !showChangePassword"
          @change-password="showChangePassword = true"
          @logout="handleLogout"
          @delete-account="handleDeleteAccount"
          @security-settings="handleSecuritySettings"
          @data-export="handleDataExport"
          @privacy-settings="handlePrivacySettings"
        />
      </div>

      <!-- 扩展功能区域 - 为后续迭代预留 -->
      <div class="extended-functions" v-if="!showEditProfile && !showChangePassword">
        <div class="function-card">
          <div class="card-header">
            <h3>学习统计</h3>
            <a-button type="text" disabled> 即将开放 </a-button>
          </div>
          <div class="card-content">
            <p>查看您的学习进度、课程完成情况等统计数据</p>
          </div>
        </div>

        <div class="function-card">
          <div class="card-header">
            <h3>消息通知</h3>
            <a-button type="text" disabled> 即将开放 </a-button>
          </div>
          <div class="card-content">
            <p>管理您的消息通知偏好设置</p>
          </div>
        </div>

        <div class="function-card">
          <div class="card-header">
            <h3>主题设置</h3>
            <a-button type="text" disabled> 即将开放 </a-button>
          </div>
          <div class="card-content">
            <p>自定义界面主题和显示偏好</p>
          </div>
        </div>
      </div>
    </div>
  </MainPage>
</template>

<script setup lang="ts">
import { changeUserPassword, updateUserInfo } from '@/api/user';
import CommonHeader from '@/components/CommonHeader/index.vue';
import type { IUserInfo } from '@/interface/user';
import MainPage from '@/layouts/MainPage.vue';
import { useUserStore } from '@/stores/user';
import { logOut } from '@/utils/request';
import { EditOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import ChangePasswordForm from './components/ChangePasswordForm.vue';
import EditProfileForm from './components/EditProfileForm.vue';
import UserActions from './components/UserActions.vue';
import UserInfoDisplay from './components/UserInfoDisplay.vue';

const router = useRouter();

// 状态管理
const showEditProfile = ref(false);
const showChangePassword = ref(false);
const userStore = useUserStore();

// 事件处理
const handleEditAvatar = () => {
  message.info('头像编辑功能开发中...');
};

const handleProfileSubmit = async (data: Partial<IUserInfo>) => {
  try {
    // 这里应该调用API更新用户信息
    console.log('更新用户信息:', data);

    await updateUserInfo(data as IUserInfo);
    await userStore.fetchUserInfo();
    showEditProfile.value = false;
    message.success('个人信息更新成功');
  } catch (error) {
    console.error('更新失败:', error);
    message.error('更新失败，请重试');
  }
};

const handlePasswordSubmit = async (data: any) => {
  try {
    // 这里应该调用API修改密码
    const { currentPassword, newPassword } = data;
    const params = {
      old_password: currentPassword,
      new_password: newPassword,
    };
    console.log('修改密码:', params);
    await changeUserPassword(params);

    showChangePassword.value = false;
    // 退出登录
    logOut();
    message.success('密码修改成功');
  } catch (error) {
    console.error('修改密码失败:', error);
    message.error('修改密码失败，请重试');
  }
};

const handleLogout = () => {
  // 这里应该调用登出API
  console.log('用户登出');
  logOut();
  message.success('已退出登录');
};

const handleDeleteAccount = () => {
  // 这里应该调用删除账户API
  console.log('删除账户');
  message.success('账户注销申请已提交');
};

const handleSecuritySettings = () => {
  message.info('安全设置功能开发中...');
};

const handleDataExport = () => {
  message.info('数据导出功能开发中...');
};

const handlePrivacySettings = () => {
  message.info('隐私设置功能开发中...');
};
</script>

<style lang="less" scoped>
.user-center-content {
  height: 100%;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;

  & > div {
    margin: 0 auto;
    max-width: 70%;
    min-width: 70%;
  }

  .function-area {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .extended-functions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 24px;
  }

  .function-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid #f1f5f9;
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

      h3 {
        font-size: 18px;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
      }

      .ant-btn {
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.2s ease;

        &.ant-btn-primary {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border: none;
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);

          &:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
          }
        }

        &.ant-btn-text {
          color: #667eea;

          &:hover {
            color: #5a67d8;
          }
        }
      }
    }

    .card-content {
      padding: 20px 24px;

      p {
        font-size: 14px;
        color: #64748b;
        line-height: 1.6;
        margin: 0;
      }
    }
  }
}

@media (max-width: 768px) {
  .user-center-page {
    .user-center-content {
      padding: 16px;

      .extended-functions {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style>
